<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id?'编辑':'新增'"
             @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="专家名称" prop="name">
            <el-input v-model="form.name" maxlength="255" placeholder="请输入专家名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专家头像" prop="avatar">
            <Upload v-model:value="form.avatar" type="image" :customStyle="{'width':'120px','height':'120px'}"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="form.description" maxlength="500" placeholder="请输入描述"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="作品集" prop="portfolio">
            <el-input v-model="form.portfolio" maxlength="255" placeholder="请输入作品集"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="作战战略" prop="operationalStrategy">
            <el-input type="textarea" v-model="form.operationalStrategy" maxlength="500" placeholder="请输入作战战略"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="基础信息" prop="portfolio">
            <el-input v-model="form.baseInfo" maxlength="255" placeholder="请输入基础信息"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="专家分类" prop="expertCategoryId">
            <el-tree-select
              placeholder="请选择专家分类"
              v-model="form.expertCategoryId"
              :data="expertCategoryList"
              check-strictly
              :render-after-expand="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addExpert, getExpert, updateExpert} from "@/api/app/expert";
import {getExpertCategoryList} from "@/api/app/expertCategory";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
  id: null,
  name: null,
  avatar: null,
  description: null,
  portfolio: null,
  operationalStrategy: null,
  baseInfo: null,
  expertCategoryId: null,
});

// 效验规则
const rules = reactive<FormRules>({
  name: [
    {required: true, message: '专家名称不能为空'},
  ],
  avatar: [
    {required: true, message: '头像不能为空'},
  ],
  description: [
    {required: true, message: '描述不能为空'},
  ],
  expertCategoryId: [
    {required: true, message: '专家分类不能为空'},
  ],
})

// 获取详情
const getDetails = (id: string) => {
  getExpert(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '新增专家';
  if (id) {
    dialogData.id = id;
    dialogData.title = '编辑专家';
    getDetails(id);
  }
  getAllExpertCategory()
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
  form.value = {};
}
// 提交

const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: any) => {
    if (valid) {
      let data = form.value;
      if (data.id) {
        updateExpert({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      } else {
        addExpert({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })
}

const expertCategoryList = ref([])

const getAllExpertCategory = () => {
  getExpertCategoryList({}).then(res => {
    if (res.length) {
      let data = [...res]
      function fun(dataList) {
        dataList.map(item => {
          if (item.children) fun.call(this, item.children)
          Object.assign(item, { value: item.id, label: item.categoryName })
        })
      }
      fun.call(this, data)
      expertCategoryList.value = data
    }
  })
}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
